<template>
    <div class="content">
        <div class="user-header">
            <div class="head pull-left">
                <img src="http://www.xb2sc.cn/static/img/user.6aea0c3.png" alt="" class="img">
            </div>
            <div class="username pull-left">{{UserData.nickname}}</div>

            <router-link :to="{name:'UserInfo'}" class="user-tool pull-right"></router-link>
        </div>
        <div class="user-hr"></div>
        <!--<router-link :to="{name:'Invite'}" class="user-menu no-mores" :style="icons(4)">-->
            <!--<span class="pull-left">推广收益</span>-->
        <!--</router-link>-->

        <div class="user-menu no-mores" :style="icons(4)">
            <span class="pull-left">推广收益</span>
        </div>
        <div class="user-sou-box">
            <div class="item">
                <div class="title"><router-link :to="{name:'inviteMore',query:{type:1}}">明细</router-link></div>
                <div class="tit">总收益金额（元）</div>
                <div class="number">{{UserData.addCount}}</div>
            </div>
            <div class="item right">
                <div class="title"><router-link :to="{name:'inviteMore',query:{type:2}}">明细</router-link></div>
                <div class="tit">可提现金额（元）</div>
                <div class="number">{{UserData.distribut_money}}</div>

                <van-action-sheet v-model="show" title="选择提现至" :actions="actions" @select="onSelect" />
                <button class="item-btn" @click="refund">提现</button>
            </div>
        </div>

        <router-link :to="{name:'userCollect'}" class="user-menu" :style="icons(0)">
            <span class="pull-left">我的收藏</span>
        </router-link>
        <router-link :to="{name:'userBook'}" class="user-menu" :style="icons(1)">
            <span class="pull-left">我的订阅</span>
        </router-link>
        <router-link :to="{name:'relUser'}" class="user-menu" :style="icons(2)">
            <span class="pull-left">我的发布</span>
        </router-link>
        <router-link :to="{name:'userOrder'}" class="user-menu" :style="icons(3)">
            <span class="pull-left">我的订单</span>
        </router-link>

        <router-link :to="{name:'forgetPwd'}" class="user-menu" :style="icons(6)">
            <span class="pull-left">安全设置</span>
        </router-link>

        <router-link :to="{name:'userCode'}" class="user-menu" :style="icons(7)">
            <span class="pull-left">实名认证</span>
        </router-link>

        <div class="user-hr"></div>

        <!--<div class="user-hr"></div>-->
        <!--<router-link :to="{name:'message',query:{cat:2}}" class="user-menu no-border" :style="icons(5)">-->
            <!--<span class="pull-left">活动专区</span>-->
        <!--</router-link>-->

        <van-swipe class="ad-box" :autoplay="5000" indicator-color="white" v-if="adImg.length>0">
            <van-swipe-item v-for="(image, index) in adImg" :key="index">
                <van-image class="img" lazy-load :src="img(image.thumb)">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20"/>
                    </template>
                </van-image>

            </van-swipe-item>
        </van-swipe>

        <Footer active="user"></Footer>
    </div>
</template>

<script>
    import Footer from '../../components/footer'
    import storeJs from 'storejs'

    export default {
        name: 'user',
        components: {
            Footer
        },
        data() {
            return {
                adImg: [],
                UserData: {},
                actions: [],
                show:false,
              svrData:[],
            }
        },
        computed: {},
        mounted: function () {
            //this.UserData = this.isLogin();

            this.$api.member.index().then(res => {
                var res = res.data;

                this.UserData = res.data;
            });

          this.$api.index.getServer().then(res=>{
            var res=res.data;

            this.svrData=res.data;
          });

            this.getAd();
        },
        methods: {

            icons(index) {
                switch (index) {
                    case 0:
                        return 'background-image:url(' + require("@/assets/images/user/star.svg") + ')';
                        break;
                    case 1:
                        return 'background-image:url(' + require("@/assets/images/user/book.svg") + ')';
                        break;
                    case 2:
                        return 'background-image:url(' + require("@/assets/images/user/fb.svg") + ')';
                        break;
                    case 3:
                        return 'background-image:url(' + require("@/assets/images/user/order.svg") + ')';
                        break;
                    case 4:
                        return 'background-image:url(' + require("@/assets/images/user/tg.svg") + ')';
                        break;
                    case 5:
                        return 'background-image:url(' + require("@/assets/images/user/girft.svg") + ')';
                        break;

                    case 6:
                        return 'background-image:url(' + require("@/assets/images/icon/safe.svg") + ')';
                        break;
                    case 7:
                        return 'background-image:url(' + require("@/assets/images/icon/user_par.svg") + ')';
                        break;
                }
            },

            //广告
            getAd() {
                this.$api.index.getAd({
                    pid: 4
                }).then(res => {
                    res = res.data;
                    this.adImg = res.data;
                });
            },

            refund(){
                var that=this;

                this.actions=[];

                if(that.UserData.real_name_status==0){
                    that.$dialog.confirm({
                        title: '实名',
                        message: '您还没有实名认证，请先实名认证！'
                    }).then(() => {
                        that.$router.replace({
                            name: 'userCode',
                        });
                    }).catch(() => {
                        // on cancel
                    });
                    return false;
                }

                if((that.UserData.alipay_user=="" || that.UserData.alipay_user==null) && that.UserData.wechat_user=="" || that.UserData.alipay_user==null){
                    that.$dialog.confirm({
                        title: '提现',
                        message: '您还没有绑定微信或支付宝账号，是否立即去绑定'
                    }).then(() => {
                        that.$router.replace({
                            name: 'UserInfoUpdate',
                        });
                    }).catch(() => {
                        // on cancel
                    });
                    return false;
                }

                if(that.UserData.distribut_money<=0){
                    that.$toast("当前账户余额不足！");
                    return false;
                }

                if(that.UserData.alipay_user!=""){
                    this.actions.push({ name: '支付宝账号',value:"alipay" })
                }

                if(that.UserData.wechat_user!=""){
                    this.actions.push({ name: '微信账号',value:"wechat" })
                }

                this.show=true;

            },
            onSelect(v){
                var that=this;

                that.$dialog.confirm({
                    title: '提现',
                    message: '您确认把所有余额提现至【'+v.name+'】吗？'
                }).then(() => {

                    that.$api.member.userRefund({pay_type:v.value}).then(res=>{
                        var res=res.data;

                        if(res.status){
                            that.$toast(res.msg);
                            that.$api.member.index().then(res => {
                                var res = res.data;

                                that.UserData = res.data;
                            });
                        }else{
                            that.$toast(res.msg);
                        }
                    });

                }).catch(() => {
                    // on cancel
                });
                that.show=false;
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/user.scss";
</style>
